<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div class="root">
<!--  第三步:编写组件标签-->
<!--  如果引用的组件定义名称有多个单词,可以用-,-->
  <my-school></my-school>
  <hr/>
  <student></student>
</div>
</body>

<script type="text/javascript">
  /**
   * school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
   */
  //第一步:创建组件
  const school = Vue.extend({
    template: `
      <div>
      <h4>学校名称:{{ schoolName }}</h4>
      </div>
    `,
    data() {
      return {
        schoolName: '大学'
      }
    }
  })
  const student = Vue.extend({
    template: `
      <div>
      <h4>学生名称:{{studentName}}</h4>
      </div>
    `,
    data(){
      return {
        studentName: '学生'
      }
    }
  })

  new Vue({
    el: '.root',
    //第二步:注册组件
    components: {
      'my-school': school,
      student
    }
  })

  //全局注册组件
  // Vue.component({})
</script>
</html>
